<template>
  <div class="preferences-container">
    <el-container>
      <el-header class="header">
        <div class="header-content">
          <h1 class="page-title">偏好设置</h1>
          <el-button @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回
          </el-button>
        </div>
      </el-header>
      
      <el-main class="main-content">
        <div class="preferences-content">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="preferences-sections">
                <!-- 角色偏好 -->
                <el-card class="preference-card">
                  <template #header>
                    <div class="card-header">
                      <el-icon><User /></el-icon>
                      <span>角色偏好</span>
                    </div>
                  </template>
                  
                  <el-form :model="characterPrefs" label-width="120px">
                    <el-form-item label="喜欢的角色类型">
                      <el-checkbox-group v-model="characterPrefs.favoriteTypes">
                        <el-checkbox value="warrior">武侠角色</el-checkbox>
                        <el-checkbox value="mage">法师角色</el-checkbox>
                        <el-checkbox value="scholar">文人角色</el-checkbox>
                        <el-checkbox value="noble">贵族角色</el-checkbox>
                        <el-checkbox value="commoner">平民角色</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    
                    <el-form-item label="互动风格">
                      <el-radio-group v-model="characterPrefs.interactionStyle">
                        <el-radio value="formal">正式</el-radio>
                        <el-radio value="casual">随意</el-radio>
                        <el-radio value="playful">活泼</el-radio>
                        <el-radio value="serious">严肃</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    
                    <el-form-item label="对话长度">
                      <el-select v-model="characterPrefs.responseLength">
                        <el-option label="简短" value="short"></el-option>
                        <el-option label="适中" value="medium"></el-option>
                        <el-option label="详细" value="long"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-card>
                
                <!-- 语言偏好 -->
                <el-card class="preference-card">
                  <template #header>
                    <div class="card-header">
                      <el-icon><ChatDotRound /></el-icon>
                      <span>语言偏好</span>
                    </div>
                  </template>
                  
                  <el-form :model="languagePrefs" label-width="120px">
                    <el-form-item label="语言风格">
                      <el-checkbox-group v-model="languagePrefs.styles">
                        <el-checkbox value="ancient">古风</el-checkbox>
                        <el-checkbox value="modern">现代</el-checkbox>
                        <el-checkbox value="poetic">诗意</el-checkbox>
                        <el-checkbox value="humorous">幽默</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    
                    <el-form-item label="敏感词过滤">
                      <el-switch
                        v-model="languagePrefs.filterSensitive"
                        active-text="开启"
                        inactive-text="关闭"
                      />
                    </el-form-item>
                    
                    <el-form-item label="表情符号">
                      <el-switch
                        v-model="languagePrefs.useEmoji"
                        active-text="使用"
                        inactive-text="不使用"
                      />
                    </el-form-item>
                  </el-form>
                </el-card>
                
                <!-- 通知偏好 -->
                <el-card class="preference-card">
                  <template #header>
                    <div class="card-header">
                      <el-icon><Bell /></el-icon>
                      <span>通知偏好</span>
                    </div>
                  </template>
                  
                  <el-form :model="notificationPrefs" label-width="120px">
                    <el-form-item label="新消息通知">
                      <el-switch
                        v-model="notificationPrefs.newMessage"
                        active-text="开启"
                        inactive-text="关闭"
                      />
                    </el-form-item>
                    
                    <el-form-item label="系统更新">
                      <el-switch
                        v-model="notificationPrefs.systemUpdate"
                        active-text="开启"
                        inactive-text="关闭"
                      />
                    </el-form-item>
                    
                    <el-form-item label="推荐角色">
                      <el-switch
                        v-model="notificationPrefs.recommendations"
                        active-text="开启"
                        inactive-text="关闭"
                      />
                    </el-form-item>
                  </el-form>
                </el-card>
              </div>
            </el-col>
            
            <el-col :span="8">
              <div class="preferences-sidebar">
                <!-- 个性化建议 -->
                <el-card class="suggestion-card">
                  <template #header>
                    <div class="card-header">
                      <el-icon><Star /></el-icon>
                      <span>个性化建议</span>
                    </div>
                  </template>
                  
                  <div class="suggestions">
                    <div class="suggestion-item">
                      <h4>基于您的偏好</h4>
                      <p>我们推荐您尝试与《斗罗大陆》中的唐三对话，他的性格符合您喜欢的严肃风格。</p>
                    </div>
                    <div class="suggestion-item">
                      <h4>热门角色</h4>
                      <p>最近《长安十二时辰》中的李必很受欢迎，您可能会喜欢他的博学风格。</p>
                    </div>
                  </div>
                </el-card>
                
                <!-- 操作按钮 -->
                <el-card class="actions-card">
                  <template #header>
                    <div class="card-header">
                      <el-icon><Operation /></el-icon>
                      <span>操作</span>
                    </div>
                  </template>
                  
                  <div class="preference-actions">
                    <el-button type="primary" @click="savePreferences" :loading="saving">
                      <el-icon><Check /></el-icon>
                      保存偏好
                    </el-button>
                    <el-button @click="resetPreferences">
                      <el-icon><RefreshRight /></el-icon>
                      重置
                    </el-button>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft,
  User,
  ChatDotRound,
  Bell,
  Star,
  Operation,
  Check,
  RefreshRight
} from '@element-plus/icons-vue'

const router = useRouter()
const saving = ref(false)

// 角色偏好
const characterPrefs = reactive({
  favoriteTypes: ['warrior', 'scholar'],
  interactionStyle: 'casual',
  responseLength: 'medium'
})

// 语言偏好
const languagePrefs = reactive({
  styles: ['ancient', 'poetic'],
  filterSensitive: true,
  useEmoji: true
})

// 通知偏好
const notificationPrefs = reactive({
  newMessage: true,
  systemUpdate: true,
  recommendations: false
})

const goBack = () => {
  router.back()
}

const savePreferences = async () => {
  saving.value = true
  
  try {
    // 模拟保存偏好设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('偏好设置保存成功！')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  } finally {
    saving.value = false
  }
}

const resetPreferences = () => {
  // 重置为默认值
  Object.assign(characterPrefs, {
    favoriteTypes: [],
    interactionStyle: 'casual',
    responseLength: 'medium'
  })
  
  Object.assign(languagePrefs, {
    styles: [],
    filterSensitive: true,
    useEmoji: true
  })
  
  Object.assign(notificationPrefs, {
    newMessage: true,
    systemUpdate: true,
    recommendations: false
  })
  
  ElMessage.success('偏好设置已重置')
}
</script>

<style scoped>
.preferences-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.header {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.main-content {
  padding: 20px;
}

.preferences-content {
  max-width: 1200px;
  margin: 0 auto;
}

.preferences-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.preference-card,
.suggestion-card,
.actions-card {
  border-radius: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #333;
}

.preferences-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.suggestions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggestion-item h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 14px;
}

.suggestion-item p {
  margin: 0;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}

.preference-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preference-actions .el-button {
  justify-content: flex-start;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .preferences-content .el-col {
    margin-bottom: 20px;
  }
  
  .preference-actions {
    flex-direction: row;
    gap: 12px;
  }
  
  .preference-actions .el-button {
    flex: 1;
  }
}
</style> 